<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>模块管理-txh</title>
	<link rel="stylesheet" href="/layui/css/layui.css" />
	<style>

	</style>
	<script src="/layui/layui.js"></script>
</head>

<body>
	<div id="add" style="display: none;">
		<form id="add_f" lay-filter="add_f" class="layui-form" class="layui-from">
			<div style="display: none;" class="layui-form-item">
				<label class="layui-form-label">模块ID</label>
				<div class="layui-input-inline">
					<input type="text" name="Id" lay-verify="title" autocomplete="off" placeholder="请输入标题"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">模块名</label>
				<div class="layui-input-inline">
					<input lay-verify="required" type="text" name="Name" lay-verify="title" autocomplete="off" placeholder="请输入标题"
						class="layui-input">
				</div>
			</div>
			<div style="display: none;" class="layui-form-item">
				<label class="layui-form-label">父模块ID</label>
				<div class="layui-input-inline">
					<input type="text" name="ParentId" lay-verify="title" autocomplete="off" placeholder="请输入标题"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">模块路径</label>
				<div class="layui-input-inline">
					<input lay-verify="required" type="text" name="Path" lay-verify="title" autocomplete="off" placeholder="请输入标题"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">权重</label>
				<div class="layui-input-inline">
					<select lay-verify="required" name="Weight">
						<option value=""></option>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
						<option value="7">7</option>
						<option value="8">8</option>
						<option value="9">9</option>
						<option value="10">10</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"></label>
				<div class="layui-input-inline">
					<button class="layui-btn" lay-submit lay-filter="add">添加</button>
				</div>
			</div>
		</form>
	</div>
	<div id="edit" style="display: none;">
		<form id="edit_f" lay-filter="edit_f" class="layui-form" class="layui-from">
			<div style="display: none;" class="layui-form-item">
				<label class="layui-form-label">模块ID</label>
				<div class="layui-input-inline">
					<input type="text" name="Id" lay-verify="title" autocomplete="off" placeholder="请输入标题"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">模块名</label>
				<div class="layui-input-inline">
					<input lay-verify="required" type="text" name="Name" lay-verify="title" autocomplete="off" placeholder="请输入标题"
						class="layui-input">
				</div>
			</div>
			<div style="display: none;" class="layui-form-item">
				<label class="layui-form-label">父模块ID</label>
				<div class="layui-input-inline">
					<input type="text" name="ParentId" lay-verify="title" autocomplete="off" placeholder="请输入标题"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">模块路径</label>
				<div class="layui-input-inline">
					<input lay-verify="required" type="text" name="Path" lay-verify="title" autocomplete="off" placeholder="请输入标题"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">权重</label>
				<div class="layui-input-inline">
					<select lay-verify="required" name="Weight">
						<option value=""></option>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
						<option value="7">7</option>
						<option value="8">8</option>
						<option value="9">9</option>
						<option value="10">10</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"></label>
				<div class="layui-input-inline">
					<button class="layui-btn" lay-submit lay-filter="edit">编辑</button>
				</div>
			</div>
		</form>
	</div>
	<div id="modules_tree"></div>
</body>
<script type="text/javascript">
	layui.use(['tree', 'form'], function () {
		var tree = layui.tree;
		var $ = layui.$;
		var form = layui.form;

		tree.render({
			id: "m_tree"
			, elem: "#modules_tree"
			, data: []
			//, edit: ["add","update","del"]
			, edit: []
		})
		var treeReload = function () {
			$.post("/modules/getTreeAll", {}, function (res) {
				tree.reload('m_tree', {data: res});
				$.post("/modules/getAll", {}, function (res) {
					var dataObj = $(".layui-tree-set");
					for (var i = 0; i < dataObj.length; i++) {
						for (var j = 0; j < res.length; j++) {
							var id = $(dataObj[i]).attr("data-id");
							if (res[j].Id == id) {
								$(dataObj[i]).attr("data", JSON.stringify(res[j]))
							}
						}
					}
				}, "json")
				$(".layui-tree-btnGroup").unbind().append(`
					<i class="layui-icon layui-icon-add-1" data-type="add"></i>
					<i class="layui-icon layui-icon-edit" data-type="edit"></i>
					<i class="layui-icon layui-icon-delete" data-type="del"></i>
				`)
				$("[data-type]").click(function (obj) {
					mytree(obj)
				})
			}, "json")
		}
		treeReload();
		var mytree = function (obj) {
			var parent = $(obj.target).parent().parent().parent();
			var type = $(obj.target).attr("data-type");
			var id = $(obj.target).parent().parent().parent().attr("data-id");
			var data = JSON.parse($("[data-id='" + id + "']").attr("data"));
			console.log($(obj.target))
			console.log(id)
			if (type == "add") {
				$("#add_f")[0].reset();
				form.val("add_f", {
					ParentId: id
				})
				layer.open({
					type: 1
					, title: "添加"
					, content: $("#add")
					, area: ["400px", "300px"]
				})
			} else if (type == "edit") {
				$("#edit_f")[0].reset();
				form.val("edit_f", data)
				layer.open({
					type: 1
					, title: "编辑"
					, content: $("#edit")
					, area: ["400px", "300px"]
				})
			} else if (type == "del") {
				console.log(data)
				layer.confirm("您确定要删除【"+data.Name+"】模块?",{icon:3}, function () {
					$.post("/modules/delete", {
						Id: id
					}, function (res) {
						if (res.success) {
							treeReload();
							layer.msg(res.message, {icon: 1})
							layer.closeAll("page")
						} else {
							layer.msg(res.message, {icon: 2})
						}
					}, "json")
				})
			}
		}

		form.on("submit(add)", function () {
			$.post("/modules/add", $("#add_f").serialize(), function (res) {
				if (res.success) {
					treeReload();
					layer.msg(res.message, {icon: 1})
					layer.closeAll("page")
				} else {
					layer.msg(res.message, {icon: 2})
				}
			}, "json")
			return false;
		})
		form.on("submit(edit)", function () {
			$.post("/modules/update", $("#edit_f").serialize(), function (res) {
				if (res.success) {
					treeReload();
					layer.msg(res.message, {icon: 1})
					treeReload();
					layer.closeAll("page")
				} else {
					layer.msg(res.message, {icon: 2})
				}
			}, "json")
			return false;
		})
	})
</script>

</html>